<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath(); 
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="<%=cp%>/main/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=cp%>/main/js/follower.js"></script>
<script type="text/javascript" > 
$(document).ready(function() {
  $('#floatR').scrollFollower({
    pageAlign:'center',
    pageWidth:800,
    type:'right',
    topMargin:150,
    minTop:20,
    margin:20,
    speed:500,
    easing:'swing',
    zindex:10
  });
  $('#floatL').scrollFollower({
    pageAlign:'center',
    pageWidth:800,
    type:'left',
    topMargin:150,
    minTop:150,
    margin:50,
    speed:500,
    easing:'linear',
    zindex:10
  });
});
</script>

</head>
<body style="margin:0;font-size:11px;font-family:gulimche">
<div style="margin:0 auto;width:800px;height:3000px;border:1px solid red;">
<pre>
jquery플러그인이므로 jquery를 필수로 사용해야 동작하는 스크립트입니다.
pageAlign : center 또는 left
pageWidth : 컨텐츠 블럭의 폭(필수값)
type      : right 또는 left(pageAlign의 값을 center로 했을때만 left값 사용가능)
topMargin : 페이지 최상단과의 거리
minTop    : 스크롤 했을때 브라우저 상단과의 거리(topMargin과 같은 값을 넣으면 같은 높이 유지)
margin    : 컨텐츠 블럭과의 좌 또는 우의 마진(left일때는 오른쪽 마진, right일때는 왼쪽 마진)
speed     : 따라다니는 속도
easing    : linear 또는 swing (easing plugin 플러그인을 쓴다면 플러그인 옵션값을 모두 사용할 수 있음)
zindex    : 필요하다면...
 
이 페이지에서 사용된 코드
오른쪽
$('#floatR').scrollFollower({
  pageAlign:'center',
  pageWidth:800,
  type     :'right',
  topMargin:150,
  minTop   :20,
  margin   :20,
  speed    :500,
  easing   :'swing',
  zindex   :10
});
&lt;div id="floatR" style="width:50px;height:150px;border:1px solid blue;">
RIGHT SIDE
&lt;/div>
 
왼쪽
$('#floatL').scrollFollower({
  pageAlign:'center',
  pageWidth:800,
  type:'left',
  topMargin:150,
  minTop:150,
  margin:50,
  speed:500,
  easing:'linear',
  zindex:10
});
&lt;div id="floatL" style="width:50px;height:150px;border:1px solid blue;">
LEFT SIDE
&lt;/div>
</pre>
</div>
<div id="floatR" style="width:50px;height:150px;border:1px solid blue;">
RIGHT SIDE
</div>
<div id="floatL" style="width:50px;height:150px;border:1px solid blue;">
LEFT SIDE
</div>
</body>

</html>








































